<template>
  <WelcomeItem>
    <template #icon>
      <SvgIcon name="logo" size="50px" style="margin-top: 10px"></SvgIcon>
    </template>
    <template #heading>Documentation</template>
  </WelcomeItem>

  <div class="marginTop">
    <el-input placeholder="请输入Prop的test内容" v-model="changePropTxt" style="width: 300px">
      <template #append>
        <el-button @click="handleXiugaiFn">修改</el-button>
      </template>
    </el-input>
    <div class="marginTop curor" @click="handleClick">
      prop: {{ test }} <span v-if="asdObj.a">--- {{ asdObj.a }}</span>
    </div>
  </div>

  <div class="marginTop">
    <el-input placeholder="请输入Emit的test内容" v-model="changeEmitTxt" style="width: 450px">
      <template #append>
        <el-button @click="handleEmitTest">测试不声明的emit</el-button>
      </template>
    </el-input>
  </div>

  <div class="marginTop">
    <div>
      {{ testPorpReactiveRef }}
    </div>
  </div>
</template>

<script setup lang="ts">
import WelcomeItem from './WelcomeItem.vue'
import { ref, watch, reactive } from 'vue'

const props = defineProps({
  test: {
    type: String,
    default: 'asd'
  },
  testPorpReactive: {
    type: String,
    default: 'asd'
  }
})

// props.testPorpReactive 是一个基础类型的值 所以只有在初始化的的时候赋值  后期变化时并不能响应
const testPorpReactiveRef = ref(props.testPorpReactive)

const emit = defineEmits(['change'])

const changeEmitTxt = ref('asd默认显示内容')
const handleEmitTest = () => {
  // @ts-ignore   未声明的emit 也是可是生效的
  emit('testEmit', changeEmitTxt.value)
}

const asdObj = reactive({
  a: ''
})
const changePropTxt = ref(props.test)
const handleXiugaiFn = () => {
  asdObj.a = changePropTxt.value
  emit('change', changePropTxt.value)
}

const handleClick = () => {
  console.log(props)
  console.log(changePropTxt)
}

// props 本质上应该是 响应式对象

// ref, 响应式对象, getter函数, 多数据源数组
watch(changePropTxt, (newVal) => {
  console.log('ref:', newVal)
})
watch(asdObj, (newVal) => {
  console.log('响应式对象:', newVal)
})
watch(
  () => asdObj.a,
  (newVal) => {
    console.log('getter函数:', newVal)
    console.log('asdObj:', asdObj)
  }
)

// props 监听
watch(
  () => props.test,
  (newVal) => {
    console.log('test-propsWatch:', newVal)
    console.log('props', props)
  }
)
</script>

<style scoped lang="scss">
.marginTop {
  margin-top: 15px;
}

.curor {
  cursor: pointer;
}
</style>
